<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录</title>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.min.css" rel="stylesheet">
    <style>
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <h3 style="text-align: center">
                用户登录
            </h3>
        </el-header>
        <el-main>
            <el-row :gutter="20">
                <el-col :span="12" :offset="6">
                    <el-form :model="auth" label-width="100px">
                        <el-form-item label="账号" prop="age">
                            <el-input v-model="auth.username"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="pass">
                            <el-input type="password" v-model="auth.password" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button style="width: 48%" type="primary" @click="onLogin">登录</el-button>
                            <el-button style="width: 49%" type="success" @click="onRegister">注册</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
</body>
<!-- 引入组件库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/store.js/2.0.12/store.legacy.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data () {
            return {
                auth: {
                    username: '',
                    mobile: '',
                    password: ''
                }
            }
        },
        mounted () {
        },
        methods: {
            onLogin () {
                axios.post("/auth/login", this.auth).then(res => res.data).then(res => {
                    if (res.error) {
                        this.$alert(res.message)

                        return;
                    }

                    store.set("user", res.data);
                    window.location.href = '/dash'
                });
            },
            onRegister () {
                this.$prompt('请输入手机号码', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^1[3-9]\d{9}$/,
                    inputErrorMessage: '手机格式不正确'
                }).then(({ value }) => {
                    this.auth.mobile = value
                    axios.post("/auth/reg", this.auth).then(res => res.data).then(res => {
                        if (res.error) {
                            this.$alert(res.message)

                            return;
                        }

                        store.set("user", res.data);
                        window.location.href = '/dash'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            }
        }
    })
</script>
</html>